<template>
	<view class="page_wrapper">
		<view class="page_title">
			请设置条件并生成试题：
		</view>
		<view class="conditions_block">
			<view>
				<view class="con_title">第一个计算数范围:</view>
				<view><slider :value="examForm.firstNum" @change="changeFirstNum" min="10" max="100" step="10"  show-value /></view>
			</view>
			<view>
				<view class="con_title">第二个计算数范围:</view>
				<view><slider :value="examForm.secondNum" @change="changeSecondNum" min="10" max="100" step="10" show-value /></view>
			</view>
			<view>
				<view class="con_title">结果值范围:</view>
				<view><slider :value="examForm.resultNum" @change="changeResultNum" :min="minNum" :max="maxNum" :step="stepCount" show-value /></view>
			</view>
			<view>
				<view class="con_title">试题数量:</view>
				<view><slider :value="examForm.calcTotalCount" @change="changeCalcTotalCount" min="10" max="60" step="10" show-value /></view>
			</view>
			<view>
				<view class="con_title">计算类型:</view>
				<view class="calc_types_block">
					<checkbox-group class="calc_types" @change="calcTypeChange">
						<label class="calc_type" v-for="calcType in calcTypes" :key="calcType.name">
							<checkbox :value="calcType.name" :checked="calcType.checked" />{{calcType.name}}
						</label>
					</checkbox-group>
				</view>
			</view>
			<view>
				<view class="con_title">计算难度:</view>
				<view class="calc_types_block">
					<checkbox-group class="calc_types" @change="difficultTypeChange">
						<label class="difficult_type" v-for="difficultType in difficultTypes" :key="difficultType.name">
							<checkbox :value="difficultType.name" :checked="difficultType.checked"/>{{difficultType.name}}
						</label>
					</checkbox-group>
				</view>
			</view>
			<view class="set_btns_block">
				<view style="background-color: #E6A23C; color: white;" plain class="save_set_btn" @click="saveSet()">
					保存当前条件设置
				</view>
				<view style="background-color: #409EFF; color: white;" plain class="save_set_btn" @click="showMySetList()">
					我的常用条件设置
				</view>
				
			</view>
		</view>
		
		<view class="bottom_block">
			<view type="primary" plain class="preview_btn" @click="previewExam">生成试题</view>
		</view>
	</view>
</template>

<script>
	import {request} from '@/utils/request.js'
	import {storageData} from '@/utils/storageData.js'
	export default {
		data() {
			return {
				loading: false,
				maxNum: 100,
				minNum: 10,
				stepCount: 10,
				examForm: {
					firstNum: 20,
					secondNum: 20,
					resultNum: 20,
					calcTotalCount: 40,
					selectCalcTypes: ['+'],
					difficultTypes: []
				},
				calcTypes: [
					{name:'+', checked: true},
					{name:'-', checked: false},
					{name:'*', checked: false},
					{name:'/', checked: false}
				],
				difficultTypes: [
					{name:'计算值不为0', checked:false},
					{name:'计算值不为1', checked:false},
					{name:'得数不为0', checked:false},
					{name:'得数不为1', checked:false}
				],
				mathExamId: 0,
				mathCalcList: [],
				setList: [],
				setData: {
					title: '',
					// examForm里的属性
				}
			}
		},
		onLoad(option) {
			// this.maxNum = option.maxNum
			// console.log(this.maxNum )
			// if(this.maxNum == 10000) {
			// 	this.minNum = 500
			// 	this.stepCount = 500
			// }
			this.fetchSetList()
		},
		methods: {
			fetchSetList() {
				// const setList = storageData.getDataJSON('setList')
				// if(setList) {
				// 	this.setList = setList
				// }
				const wechatOpenId = getApp().globalData.wechatOpenId
				request.get(
					'/mathSetConditions/wechatOpenId,' + wechatOpenId, {}
				).then(res => {
					res.forEach((data) => {
						this.setList.push(JSON.parse(data.condition))
					})
				}).catch(err => {
					uni.hideLoading()
					console.log(err)
				})
			},
			changeFirstNum(e) {
				this.examForm.firstNum = e.detail.value
			},
			changeSecondNum(e) {
				this.examForm.secondNum = e.detail.value
			},
			changeResultNum(e) {
				this.examForm.resultNum = e.detail.value
			},
			changeCalcTotalCount(e) {
				this.examForm.calcTotalCount = e.detail.value
			},
			previewExam() {
				console.log(this.examForm)
				this.loading = true
				const data = JSON.parse(JSON.stringify(this.examForm))
				
				uni.showLoading()
				request.postJson( 
					'/mathExams', data
				).then(res => {
					uni.hideLoading()
					console.log(res)
					uni.navigateTo({
						url: '/pages/mathCalcs/mathCalcs?examId=' + res.id
					})
				}).catch(err => {
					uni.hideLoading()
					console.log(err)
				})
			},
			calcTypeChange(e) {
				console.log(e)
				this.examForm.selectCalcTypes = e.detail.value
			},
			difficultTypeChange(e) {
				console.log(e)
				this.examForm.difficultTypes = e.detail.value
			},
			saveSet() {
				const $this = this
				uni.showModal({
					title: '请给当前设置起个名字吧:',
					editable: true,
					success: function (res) {
						if (res.confirm) {
							const title = res.content
							const valMap = JSON.parse(JSON.stringify($this.examForm))
							valMap.title = title
							$this.setList.push(valMap)
							
							const wechatOpenId = getApp().globalData.wechatOpenId
							uni.showLoading()
							request.postJson( 
								'/mathSetConditions', 
								{
									wechatOpenId: wechatOpenId,
									condition: JSON.stringify(valMap)
								}
							).then(res => {
								uni.hideLoading()
								uni.showToast({
									icon: 'none',
									title: '保存成功'
								})
							}).catch(err => {
								uni.hideLoading()
								console.log(err)
							})
							
							// storageData.saveDataJSON('setList', $this.setList)
						}
					}
				})
			},
			showMySetList() {
				const titleList = this.setList.map(obj => obj.title)
				if(titleList.length === 0) {
					uni.showToast({
						icon: 'none',
						title: '暂无常用设置'
					})
					return false
				}
				const $this = this
				uni.showActionSheet({
					itemList: titleList,
					success: function (res) {
						console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
						$this.examForm = $this.setList[parseInt(res.tapIndex + '')]
						
						// 计算类型
						$this.calcTypes.forEach((type) => {
							type.checked = false
						})
						$this.examForm.selectCalcTypes.forEach((item) => {
							$this.calcTypes.forEach((type) => {
								if(item === type.name){
									type.checked = true
								}
							})
						})
						
						// 计算难度
						$this.difficultTypes.forEach((type) => {
							type.checked = false
						})
						$this.examForm.difficultTypes.forEach((item) => {
							$this.difficultTypes.forEach((type) => {
								if(item === type.name){
									type.checked = true
								}
							})
						})
						
					},
					fail: function (res) {
						console.log(res.errMsg);
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.page_wrapper{
		.page_title{
			font-size: 17px;
			font-weight: 500;
			height: 60px;
			display: flex;
			align-items: center;
			margin-left: 20px;
			margin-right: 20px;
		}
		.conditions_block{
			flex: 1;
			overflow-y: scroll;
			margin-left: 20px;
			margin-right: 20px;
			.con_title{
				height: 40px;
				display: flex;
				align-items: center;
			}
			.calc_types_block{
				display: flex;
				align-items: center;
				.calc_types{
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					.calc_type{
						margin-right: 30px;
						font-size: 22px;
						display: flex;
						align-items: center;
					}
					.difficult_type{
						width: 50%;
						margin-top: 5px;
						margin-bottom: 15px;
						font-size: 15px;
						display: flex;
						align-items: center;
						
					}
				}
			}
			.set_btns_block{
				display: flex;
				justify-content: space-around;
				.save_set_btn{
					flex: 0.48;
					height: 40px;
					margin-top: 5px;
					margin-bottom: 5px;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 5px;
				}
			}
		}
		.bottom_block{
			height: 60px;
			display: flex;
			justify-content: center;
			align-items: center;
			.preview_btn{
				width: 90%;
				height: 40px;
				color: white;
				background-color: #67C23A;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 5px;
			}
		}
	}
</style>